<template>
  <view class="privacy-modal" v-if="visible">
    <view class="modal-mask"></view>
    <view class="modal-content">
      <view class="modal-body">
        <!-- 标题 -->
        <view class="privacy-header">
          <text class="title">隐私政策与用户协议</text>
        </view>

        <!-- 说明文字 -->
        <view class="privacy-content">
          <text class="content-text">
            欢迎使用"摸鱼派客户端"!我们非常重视您的个人信息和隐私保护。在您使用"摸鱼派客户端"服务之前，请仔细阅读
            <text class="link-text" @click="openPrivacyPolicy">《隐私政策》</text>
            以及
            <text class="link-text" @click="openUserAgreement">《用户协议》</text>
            ，我们将严格按照您同意的各项条款使用您的个人信息，以便为您提供更好的服务。
          </text>

          <text class="content-text">
            如您同意此政策，请点击"同意"并开始使用我们的产品和服务，我们尽全力保护您的个人信息安全。
          </text>
        </view>

        <!-- 操作按钮 -->
        <view class="modal-footer">
          <button class="btn-exit" @click="handleExit">退出应用</button>
          <button class="btn-agree" @click="handleAgree">同意并继续</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'PrivacyModal',
    props: {
      visible: {
        type: Boolean,
        default: false
      }
    },
    mounted() {
      console.log("PrivacyModal 组件已挂载, visible:", this.visible);
    },
    watch: {
      visible(newVal) {
        console.log("PrivacyModal visible 变化:", newVal);
      }
    },
    methods: {
      // 打开隐私政策
      openPrivacyPolicy() {
        console.log("点击隐私政策");
        uni.navigateTo({
          url: "/pages/webview/webview?url=" + encodeURIComponent("https://fishpi.cn/privacy"),
        })
      },

      // 打开用户协议
      openUserAgreement() {
        console.log("点击用户协议");
        uni.navigateTo({
          url: "/pages/webview/webview?url=" + encodeURIComponent("https://fishpi.cn/agreement"),
        })
      },

      // 处理同意
      handleAgree() {
        console.log("用户点击同意");
        // 保存用户同意状态到本地存储
        uni.setStorageSync("privacy_agreed", true)
        this.$emit("agree")
      },

      // 处理退出
      handleExit() {
        console.log("用户点击退出");
        this.$emit("exit")
      }
    }
  }
</script>

<style lang="scss" scoped>
  .privacy-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;

    .modal-mask {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(4px);
    }

    .modal-content {
      position: relative;
      width: 600rpx;
      background: #fff;
      border-radius: 24rpx;
      overflow: hidden;
      animation: modalShow 0.3s ease-out;
    }

    .modal-body {
      padding: 40rpx;
    }

    .privacy-header {
      text-align: center;
      margin-bottom: 30rpx;

      .title {
        font-size: 36rpx;
        font-weight: 500;
        color: #333;
      }
    }

    .privacy-content {
      margin-bottom: 40rpx;

      .content-text {
        display: block;
        font-size: 28rpx;
        color: #666;
        line-height: 1.6;
        margin-bottom: 20rpx;

        &:last-child {
          margin-bottom: 0;
        }
      }

      .link-text {
        color: #4a86e8;
        text-decoration: underline;
      }
    }

    .modal-footer {
      display: flex;
      justify-content: space-between;
      gap: 20rpx;

      button {
        flex: 1;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        border-radius: 40rpx;
        font-size: 28rpx;
        font-weight: 500;
        border: none;

        &::after {
          border: none;
        }
      }

      .btn-exit {
        background: #f5f5f5;
        color: #666;
      }

      .btn-agree {
        background: #333;
        color: #fff;
      }
    }
  }

  @keyframes modalShow {
    from {
      opacity: 0;
      transform: scale(0.9);
    }

    to {
      opacity: 1;
      transform: scale(1);
    }
  }
</style>